<script setup>
import { provide, ref, watch } from 'vue'
import componentparent from './components/demo01/componentparent.vue'

const count = ref(0)
provide('msg', count)

const changeCount = () => {
  count.value++
}

watch(count, (newVal, oldVal) => {
  console.log('grandparent', newVal, oldVal)
})
provide('changeCount', changeCount)
</script>
<template>
  <div class="box">
    <h2>祖先组件</h2>
    <componentparent></componentparent>
  </div>
</template>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
}
</style>
